@charset "utf-8";

@import "common";

.web{
	header{
		.img_box{
			width: 181px;
			height: 41px;
			overflow: hidden;
			margin: 60px 0 17px 9.23%;
			img{
				height: 100%;
			}
		}
		nav{
			padding: 13px 0 10px;
			background-color: #ccd5df;
			text-align: center;
			ul{
				display: inline-block;
				li{
					width: 123px;
					position: relative;
					a{
						color: #676666;
						font-size: 12px;
						display:inline-block;
						span{
							display: block;
							transform: scale(0.67);
						}
					}
					&:hover a{
						color: #006965;
					}
				}
			}
			li:not(:last-child)::after{
				content: "";
				display: block;
				width: 1px;
				height: 24px;
				background-color: #a5a8af;
				position: absolute;
				right: 0;
				top: 50%;
				margin-top: -12px;
				
			}
		}
	}
	.banner{
		font-size: 0;
		width: 100%;
		img{
			width: 100%;
		}
	}
	main{
		.main_all{
			width: 1192px;
			margin: 96px auto 0px;
			background-color: #fff;
			height: 1600px;
			input{
				display: none;
			}
			.left_main{
				text-align: right;
				width: 300px;
				display: inline-block;
				h3{
					font-size: 22px;
					color: #3e3a39;
					font-weight: 300;
					
				}
				h4{
					font-size: 24px;
					font-weight: 500;
					color: rgba(62,58,57,0.7);
				}
				ul{
					margin-top: 40px;
					li{
						margin-top: 13.8px;
						a{
							color: #676666;
							p{
								font-size: 18px;
							}
							span{
								display: block;
								transform-origin: right;
								transform: scale(0.44);
							}
						}
						&:hover a{
							color: #006965;
						}
					}
				}
			}
			.right_main{
				display: none;
				vertical-align: top;
				margin-left: 20px;
				width: 800px;
				h2{
					width: 84px;
					height: 26px;
					display: inline-block;
					font-size: 20px;
					font-weight: bold;
					color: #000000;
					margin-right: 40px;
					text-align: center;
					transition: 0.3s;
					position: relative;
				}
				h2:hover{
					background-color: #006c68;
					color: white;
				}
				h2:not(:last-of-type)::after{
					content: "";
					position: absolute;
					display: block;
					width: 2px;
					height: 11px;
					background-color: #000;
					right: -30px;
					top:8px;
				}
				.title{
					margin-top: 74px;
					border-bottom: 1px solid #c3c3c3;
					ul{
						li{
							margin-right: 80px;
							font-size: 15px;
							color: #c3c3c3;
							text-align: left;
							font-weight: 100;
							
							&:hover{
								color: #006965;
							}
						}li:nth-child(5){
							margin: 0;
						}
					}
				}
			
				h3{
					margin-top: 30px;
					color: #006965;
				}
				#bottom_contant:checked~.content{
					display:block;
				}
				
				.content{
					display: none;
					width: 634px;
					margin-top: 38px;
					.content_one{
						padding-bottom:38px;
						padding-left: 15px;
						position: relative;
						&:not(:last-of-type)::after{
							content: "";
							display: block;
							position: absolute;
							top:0;
							left: 0;
							height: 100%;
							border-left: 1px dashed #006c68;
						}
						
						p{
							font-size:15px;
							color:#3e3a39;
							position: relative;
							&::after{
								content: "";
								display: block;
								position: absolute;
								left: -17px;
								top: 0px;
								width: 4px;
								height: 4px;
								border-radius: 5px;
								background-color: #006965
							}
						}
						span{
							font-size:16px;
							color:#3e3a39;
						}
						
					}
				}
			
			#_contant2:checked~.case{
				display:block;
			}
				
				.case{
					display: none;
					width: 800px;
					margin-top: 38px;
					.case_one{
						display: flex;
						align-items: center;
						border-bottom: 1px dashed #006c68;
						padding-bottom:30px;
						margin-top:30px;
						.case_one_right{
							width: 458px;
							
							h4{
								font-size: 16px;
								color: #006c68;
								font-weight: 500;
								padding-bottom: 14px;
								span{
									font-size: 16px;
									color: #3e3a39;
									
								}
							}
							p{
								font-size: 16px;
								color: #3e3a39;
								padding-bottom: 14px;
							}
						}
						.case_one_left{
							margin-left: 42px;
							vertical-align: top;
						}
					}
				
					.case_two{
						display: flex;
						align-items: center;
						margin-top: 30px;
						padding-top: 30px;
						.case_two_right{
							width:457px;
							
							h4{
								font-size: 16px;
								color: #006c68;
								font-weight: 500;
								padding-bottom: 14px;
								span{
									font-size: 16px;
									color: #3e3a39;
								}
							}h4:nth-child(4),h4:nth-child(5){
								display: inline-block;
							}h4:nth-last-child(4),h4:nth-last-child(3){
								display: inline-block;
							}h4:nth-child(7){
								margin-bottom: 58px;
							}
						}
						.case_two_left{
							margin-left: 42px;
							vertical-align: top;
							
						}
					}
				}
			
			}#main_coonrol:checked~.right_main{
				display: block;
			}
		}
	}

	footer{
		
		.fotter_all{
			display: inline-block;
			width: 100%;
			background-color: #f7f7f7;
			text-align: center;
			// background-color: skyblue;
			.fotter_top{
				width: 1170px;
				display: inline-block;
				.top{
					ul{
						li{
							width: 234px;
							height: 36px;
							margin-top: 42px;
							p{
								font-size: 20px;
								font-weight: bold;
								line-height: 10px;
							}
							span{
								font-size: 10px;
								color: #a0a0a0;
							}
						}
					}
				}
				.bottom{
						ul{
							li{
								margin-top: 24px; 
								width: 234px;
								position: relative;
								a{
									font-size: 13px;
									color: #000;
									display: block;
									margin-bottom: 6px;
								}
								a:hover{
									color: #006965;
								}
							}
						}
						li::before{
						content: "";
						display: block;
						width: 2px;
						height: 214px;
						background-color: #a5a8af;
						position: absolute;
						left: 0;
						top:30px;
					
						
					}
				}
			}
			
			.fotter_bottom{
				background-color: #3e3a39;
				height: 140px;
				width:100%;
				display: inline-block;
				
				.bottom_right{
					width:954px;
					display: inline-block;
					text-align: left;
					ul{
						li{
							margin-top: 30px;
							margin-right:60px;
							text-align: center;
							a{
								color: #fff;
								p{
									font-size: 15px;
								}
								span{}
							}
						}
					}
					p{
						font-size: 13px;
						font-weight: bold;
						color: white;
						margin-top: 10px;
					}
					span{
						font-size: 10px;
						color: #cfcecd;
					}
				}
				.bottom_left{
					display: inline-block;
					height: 140px;
					line-height: 140px;
					vertical-align: top;
					a{
						text-align: center;
						display: inline-block;
						width: 102px;
						height: 25px;
						background-color: #45bbac;
						color: white;
						font-size: 14px;
						border-radius: 30px;
						line-height: 25px;
						position: relative;
					}
					.my_icon{
						background-color: white;
						font-size: 32px;
						border-radius: 5px;
						vertical-align: middle;
						padding: 2px;
						margin-left: 53px;
					}
					a::after{
						content: "";
						display: block;
						width: 1px;
						height: 24px;
						background-color: #a5a8af;
						position: absolute;
						right: -27px;
						top: 0;
						
					}
				}
				
			}
		
			.fotter_under{
				width: 100%;
				height: 60px;
				background-color: #231815;
				.my_chose{
					font-size: 36px;
					color: white;
					line-height: 60px;
				}
			}
		
			.fotter_under_bottom{
				width: 100%;
				height: 60px;
				}
			
		}
		
			
	}

}